<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        .box {
            width: 600px;
            height: 400px;
            position: relative;
            margin: 20px auto;
        }
        .smallBox {
            width: 600px;
            height: 400px;
            overflow: hidden;
        }
        .ul {
            width: 4200px;
            height: 400px;
            display: flex;
        }
        .ul li {
            width: 600px;
            height: 400px;
            text-align: center;
            line-height: 400px;
            font-size: 64px;
            font-weight: 600;
            color: white;
        }
        .left {
            left: 20px;
        }
        .right {
            right: 20px;
        }
        .arrow {
            top: 170px;
            height: 40px;
            width: 30px;
            text-align: center;
            position: absolute;
            line-height: 40px;
            font-weight: 600;
            background-color: rgba(240, 248, 255, 0.6);
        }
        .btnUl {
            position: absolute;
            top: 300px;
            left: 200px;
            display: flex;
            width: 200px;
            justify-content: space-between;
        }
        .btnUl li {
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            background-color: #999;
        }
        .btnUl .bg {
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="smallBox">
            <ul class="ul">
                <li style="background-color: blue;">5</li>
                <li style="background-color: red;">1</li>
                <li style="background-color: orange;">2</li>
                <li style="background-color: yellow;">3</li>
                <li style="background-color: green;">4</li>
                <li style="background-color: blue;">5</li>
                <li style="background-color: red;">1</li>
            </ul>
            <div class="arrow left">&lt;</div>
            <div class="arrow right">&gt;</div>
            <ul class="btnUl">
                <li class="bg">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>

    <script>
        const box = document.querySelector(".box")
        const smBox = document.querySelector(".smallBox")
        const ul = document.querySelector("ul")
        const lis = document.querySelectorAll("li")
        const lt = document.querySelector(".left")
        const gt = document.querySelector(".right")
        const btnLi = document.querySelectorAll(".btnUl li")


        let time;
        let moveTime;
        let index = 1;
        let ulIndex = 0;
        smBox.scrollLeft = index * lis[0].offsetWidth

        function move() {
            clearInterval(moveTime)
            let start = smBox.scrollLeft;
            let end = index * lis[0].offsetWidth;
            let speed = (end - start) / 10
            let stepStart = 0;
            let stepEnd = 10;
            moveTime = setInterval(() => {
                stepStart++;
                if (stepStart >= stepEnd) {
                    clearInterval(moveTime)
                    smBox.scrollLeft = end
                } else {
                    start = start + speed
                    smBox.scrollLeft = start
                }
            }, 30)
            console.log("start", start)
            console.log("end", end)
        }

        function swiper() {
            time = setInterval(() => {
                index++;
                ulIndex++;
                if (index > 5) {
                    index = 1;
                    ulIndex = 0;
                    smBox.scrollLeft = 0
                }
                move()
                ulColor()
            }, 3000)
        }
       
        swiper()

        box.addEventListener("mouseover", () => {
            clearInterval(time)
        })
        box.addEventListener("mouseout", () => {
            swiper()
        })


        gt.addEventListener("click", () => {
            index++;
            ulIndex++;
            if (index > 5) {
                index = 1;
                ulIndex = 0;
                smBox.scrollLeft = 0
            }
            move()
            ulColor()
        })

        lt.addEventListener("click", () => {
            index--;
            ulIndex--;
            if (index < 1) {
                index = 5;
                ulIndex = 4;
                smBox.scrollLeft = lis[0].offsetWidth * (lis.length - 1)
            }
            move()
            ulColor()
        })

        function ulColor() {
            for (i = 0; i < btnLi.length; i++) {
                btnLi[i].removeAttribute("class")
            }
            btnLi[ulIndex].setAttribute("class", "bg")
        }

        btnLi.forEach((btn, i) => {
            btn.addEventListener("click", () => {
                index = i + 1;
                ulIndex = i;
                move();
                ulColor();
            });
        });
    </script>
</body>
</html>